<!-- 我的订单 -->
<template>
	<view class="order">
		<!-- 搜索框 -->
		<view class="topnav fixed">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search icon iconfont icon-sousuo"></text>
					<input type="text" placeholder="搜索订单" confirm-type="search" @tap.stop="searchOrder" disabled></input>
				</view>
			</view>
		</view>
		<!-- tab标签栏 -->
		<view class="fixed tab">
			<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change" itemWidth="20%" :top="0"></tui-tabs>
		</view>
		<!-- 内容 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current="currentTab" @change="tabChange">
				<!-- 全部 -->
				<swiper-item v-for="i in 5">
					<scroll-view scroll-y @scrolltolower="getMore">
						<view class="baseW" v-for="(item,index) in orderList" :key="index">
							<view class="order-shop u-f-jse">
								<!-- <view class="u-f-ac">
									<text class="icon iconfont icon-dianpu"></text>
									<text class="order-shop-name text-bold text-cut">店铺名称M家购</text>
									<text class="icon iconfont icon-right"></text>
								</view> -->
								<view class="text-red text-sm" v-if="item.orderState == 0">等待买家付款</view>
								<view class="text-red text-sm" v-if="item.orderState == 1">待发货</view>
								<view class="text-red text-sm" v-if="item.orderState == 2">待提货</view>
								<view class="text-red text-sm" v-if="item.orderState == 3">已完成</view>
								<view class="text-red text-sm" v-if="item.orderState == 4">订单已关闭</view>
								<view class="text-red text-sm" v-if="item.orderState == 5">交易已取消</view>
								<view class="text-red text-sm" v-if="item.orderState == 6">退款中</view>
								<view class="text-red text-sm" v-if="item.orderState == 7">退款成功</view>
								<view class="text-red text-sm" v-if="item.orderState == 8">退款失败</view>
								<view class="text-red text-sm" v-if="item.orderState == 9">交易关闭</view>
							</view>
							<view hover-class="none" @tap="Route({url:'detail',params:{id:item.id,orderState:item.orderState,outTradeNo:item.outTradeNo}})" class="u-f-jsb u-f-ac order-goods" v-for="(itemg,indexg) in item.goodItem" :key="indexg">
								<view class="order-img-box"><image :src="itemg.picture"></image></view>
								<view class="order-goods-text">
									<view class="order-goods-name">{{itemg.title}}</view>
									<view class="guige text-sm">
										<text style="margin-right: 10rpx;">重量：1kg</text>
									</view>
									<view class="u-f-jsb">
										<view class="order-goods-price text-red text-bold text-sm">￥<text>{{itemg.price}}</text></view>
										<view class="text-sm order-num">共{{itemg.count}}件</view>
									</view>
								</view>
							</view>
							<view class="u-f-jse" v-if="item.orderState == 0">
								<view class="base-btn gray-btn" @tap.stop="cancelOrDelete(item.outTradeNo,1)">取消订单</view>
								<view class="base-btn red-btn" @tap.stop="pay(item.id)">付款</view>
							</view>
							<!-- 待取货 -->
							<view class="u-f-jse" v-if="item.orderState == 2">
								<!-- <view class="base-btn gray-btn" @tap.stop="refund(item.id)">退款</view> -->
								<!-- <view class="base-btn gray-btn" @tap.stop="changeAddress(item.outTradeNo, item.address)">修改地址</view> -->
								<view class="base-btn red-btn" @tap.stop="confirmReceipt(item.id)">确认收货</view>
							</view>
							<!-- <view class="u-f-jse" v-if="item.orderState == 2">
								<view class="base-btn gray-btn" @tap.stop="logistics(item.id)">查看物流</view>
								<view class="base-btn red-btn" @tap.stop="confirmReceipt(item.id)">确认收货</view>
							</view> -->
							<view class="u-f-jse" v-if="item.orderState == 4 || item.orderState == 5">
								<view class="base-btn red-btn" @tap.stop="cancelOrDelete(item.outTradeNo,2)">删除订单</view>
							</view>
						</view>
						<view class="no-order" v-if="noData1">
							<image src="../../../static/mine/empty_bg.png"></image>
							<view>您还没有相关的订单哦！</view>
							<view>可以去看看那些想买的</view>
						</view>
						<our-loading  :active='loadMore' :translateY='90' text="loading..."  />
						<om-nomore :visible="noMoreFlag" bgcolor="#f0f0f0"></om-nomore>
					</scroll-view>
				</swiper-item>
				<!-- 退款售后 -->
					<swiper-item>
						<scroll-view scroll-y @scrolltolower="getMore">
							<view class="baseW" v-for="(item,index) in orderList" :key="index">
								<view class="order-shop u-f-jse">
									<view v-if="item.applyStatus == 0"  class="text-red text-sm">退款审核中</view>
									<view v-if="item.applyStatus == 1"  class="text-red text-sm">退款成功</view>
									<view v-if="item.applyStatus == 2"  class="text-red text-sm">退款失败</view>
									<view v-if="item.applyStatus == 3"  class="text-red text-sm">已撤销申请</view>
								</view>
								<view @click="Route({url:'/pages/mine/order/refund/refundDetail',params:{refundDetail:encodeURIComponent(JSON.stringify(item))}})">
									<view class="u-f-jsb order-goods">
										<view class="order-img-box"><image :src="item.goodItem.picture"></image></view>
										<view class="order-goods-text2">
											<view class="order-goods-name">{{item.goodItem.title}}</view>
											<view>
												<view class="text-sm reorder-num" v-if="item.refundPrice">金额：￥{{item.refundPrice}}</view>
											</view>
										</view>
									</view>
								</view>
								<view class="u-f-ac price">
									<view v-if="item.applyStatus == 0">退款审核中</view>
									<view v-if="item.applyStatus == 1">退款成功</view>
									<view v-if="item.applyStatus == 2">退款失败</view>
									<view v-if="item.applyStatus == 3">已撤销申请</view>
									<view v-if="item.applyStatus == 2">退款成功￥{{item.refundPrice}}元</view>
								</view>
								<!-- <view class="u-f-jse">
									<view class="base-btn gray-btn" @tap.stop="delel">删除记录</view>
								</view> -->
							</view>
							<view class="no-order" v-if="noData1">
								<image src="../../../static/mine/empty_bg.png"></image>
								<view>您还没有相关的订单哦！</view>
								<view>可以去看看那些想买的</view>
							</view>
							<our-loading  :active='loadMore' :translateY='90' text="loading..."  />
							<om-nomore :visible="noMoreFlag" bgcolor="#f0f0f0"></om-nomore>
						</scroll-view>
					</swiper-item>
				</swiper>
			</swiper>
		</view>
		<!-- 确定取消 确定删除弹框 -->
		<tui-modal :show="modal1" @click="handleClick1" @cancel="hide1" title="提示" :content="'确定要' + type==1?'取消':'删除'+'该订单吗？'"></tui-modal>
		<!-- 确认订单弹框 -->
		<tui-modal :show="modal2" @click="handleClick2" @cancel="hide2" title="提示" content="确定要确认该订单吗？"></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab:0,
				tabs: [ 
					{name: "全部",num:"0",typeId:-1}, 
					{name: "待付款",num:"0",typeId:0}, 
					{name: "待发货",num:"0",typeId:1},
					{name: "待提货",num:"0",typeId:2},
					{name: "已完成",num:"0",typeId:3},
					{name: "退款/售后",num:"0",typeId:-1}
				],
				typeId: -3,			//tab订单状态
				orderList:[],		//订单列表
				total:0,
				currentPage:1,
				loadMore: false,
				noMoreFlag: false,
				noData1: false,
				orderNuber: '',			//订单编号
				type: 0,			//区分 删除2 还是 取消订单1
				modal1: false,
				modal2: false,
				memberId:this.$store.state.userInfo.memberId,
				flag: true
			}
		},
		onLoad(e) {
			this.currentTab = Number(e.tab)
			this.typeId = this.tabs[this.currentTab].typeId
			// swriper 滑动二次请求数据
			if(this.currentTab != 0){this.flag = false}
			setTimeout(()=>{
				this.flag = true
			},1500)
		},
		onShow() {
			this.clear()
			this.getList()
		},
		methods:{
			// 点击顶部切换
			change(e) {
				this.currentTab = e.index
				this.typeId = e.typeId
			},
			// 滑动切换
			tabChange(e){
				this.currentTab=e.detail.current;
				this.typeId = this.tabs[this.currentTab].typeId
				if(!this.flag) return
				this.clear()
				this.getList()
				
			},
			getList(orderState){
				let url = this.currentTab == 5 ? '/api/order/refundList' : '/api/order/allOrderList'
				let op =  this.currentTab == 5 ? {} : {orderState:this.typeId}
				this.$http.post(url, {...op,currentPage:this.currentPage,memberId:this.$store.state.userInfo.memberId}).then(res => {
					if(!res.success) return this.$tip.toast(res.msg)
					this.total = res.data.total
					if(this.total == 0) return this.noData1 = true
					let rows = res.data.rows
					// goodItem属性json转JSONObject
					rows = rows.map(item =>{
						item.goodItem = JSON.parse(item.goodItem)
						return item;
					})
					this.orderList = [...this.orderList,...rows]
				})
			},
			// 初始化页面数据
			clear(){
				this.noData1 = false
				this.noMoreFlag = false
				this.currentPage = 1
				this.orderList = []
				this.total = 0
			},
			// 触底加载
			getMore(){
				if(this.total == this.orderList.length) return this.noMoreFlag = true
				this.currentPage++
				this.getList()
			},
			// 取消 删除订单 start
			cancelOrDelete(orderNuber='',type=0){
				this.type = type
				this.orderNuber = orderNuber
				this.modal1 = true
			},
			hide1(){
				this.modal1 = false
				this.orderNuber = ''
			},
			handleClick1(e){
				// 点击确定
				if(e.index==1){
					let url = this.type == 1 ? `/api/order/cancelOrder/${this.orderNuber}/${this.memberId}`: `/api/order/deleteOrder/${this.orderNuber}/${this.memberId}`
					this.$http.post(url).then(res => {
						this.$tip.success(res)
						this.clear()
						this.getList()
					})
				}
				this.hide1()
			},
			// 取消 删除订单 end
			
			// 确认订单start
			confirmReceipt(id){
				this.orderNuber = id
				this.modal2 = true
			},
			hide2(){
				this.modal2 = false
				this.orderNuber = ''
			},
			handleClick2(e){
				// 点击确定
				if(e.index==1){
					this.$http.post(`/api/order/confirmBtn/${this.orderNuber}/${this.memberId}`).then(res => {
						this.$tip.success(res)
						this.clear()
						this.getList()
					})
				}
				this.hide2()
			},
			// 确认订单end
			// 待付款 付款
			pay(id){
				this.$http.post(`/api/order/payOrder/${id}/${this.memberId}`).then(res => {
					// 跳转到支付页
					if(!res.success) return this.$tip.toast(res.msg)
					this.Route({url:'/pages/mine/order/setUp/pay',params:{order:encodeURIComponent(JSON.stringify(res.data))}})
				})
			}
		},
	}
</script>
<style lang="scss">

</style>
<style scoped lang="scss">
.order {
	position: relative;
}
.topnav {
	top: 0;
	// #ifdef H5
	top: 44px;
	// #endif
}
.tab {
	top: 0;
	// #ifdef H5
	top: 44px;
	// #endif
	padding-top: 100rpx;
	width: 100%;
}
tui-tabs {
	margin-top: 100px;
}
.uni-tab-bar {
	padding-top: 192rpx;
	swiper-item {
		scroll-view {
			padding: 20rpx 28rpx 20rpx;
			height: 100%;
			.baseW {
				padding: 30rpx;	
			}
		}
	}
}
.swiper-box{
	height: calc(100vh - 212rpx);
}
// 退款售后
.reorder-num {
	font-weight: bold;
	color: #080808;
}
.price {
	line-height: 80rpx;
	border-radius: 10rpx;
	background-color: #F2F2F2;
	padding: 0 28rpx;
	font-size: 26rpx;
	margin: 30rpx 0;
}
.price view:first-child {
	font-size: 30rpx;
	font-weight: bold;
	margin-right: 20rpx;
}
.order-shop .u-f-ac{
	width: 480rpx;
}
</style>

